let btn_img = require('../assets/image/search.png');
let set_img = require('../assets/image/setting.png');
let stir_img = require('../assets/image/stir.png');
let project_img = require('../assets/image/project.png');
let factory_img = require('../assets/image/factory.png');

let map;

function getMap(val) {
  map = new BMap.Map(val);
  // 创建地图实例 113.7060658, 22.99444
  let point = new BMap.Point();
  // 创建点坐标
  map.centerAndZoom(point, 17);
  // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);
  // 鼠标滚轮缩放
}

function searchLocal(val) {
  let local = new BMap.LocalSearch(map, {
    renderOptions: {
      map: map
    }
  });
  local.search(val);
}

export function getLocal(val) {
  map = new BMap.Map(val);

  let geolocation = new BMap.Geolocation();
  geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      let mk = new BMap.Marker(r.point);
      map.centerAndZoom(r.point, 17);
      map.enableScrollWheelZoom(true);
      map.addOverlay(mk);
      map.panTo(r.point);
      CreateControl()
    } else {
      alert('failed' + this.getStatus());
    }
  });

}

function CreateControl() {
  function ZoomControl() {
    // 设置默认停靠位置和偏移量  
    this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
    this.defaultOffset = new BMap.Size(32, 24);
  }
  ZoomControl.prototype = new BMap.Control();
  ZoomControl.prototype.initialize = function (map) {
    // 创建一个DOM元素  
    let div = document.createElement("div");
    // 添加文字说明  
    let input = div.appendChild(document.createElement("input"));
    input.setAttribute("class", "search-input");
    let button = div.appendChild(document.createElement("button"));
    let button_img = button.appendChild(document.createElement('img'));
    button_img.src = btn_img;
    button_img.style.width = "20px";
    input.style.width = '227px';
    input.style.height = '18px';
    input.style.border = 'none';
    input.style.outline = 'none';
    input.style.padding = '8px 16px';
    input.style.borderTopRightRadius = '2px';
    input.style.borderBottomLeftRadius = '2px';
    input.style.border = "1px solid #d3d9e2";
    input.style.borderRight = 'none';
    button.style.width = '40px';
    button.style.height = '36px';
    button.style.border = 'none';
    button.style.outline = 'none';
    button.style.backgroundColor = '#3581fb';
    button.style.color = '#fff';
    button.style.borderTopRightRadius = '2px';
    button.style.borderBottomRightRadius = '2px';
    button.style.verticalAlign = 'bottom';
    let ul = div.appendChild(document.createElement('ul'));
    ul.setAttribute('id', 'click');
    let li_1 = ul.appendChild(document.createElement('li'));
    let li_2 = ul.appendChild(document.createElement('li'));
    let li_3 = ul.appendChild(document.createElement('li'));
    let li_4 = ul.appendChild(document.createElement('li'));
    li_1.innerHTML = '<img src="' + set_img + '">' + '五金店';
    li_2.innerHTML = '<img src="' + stir_img + '">' + '混凝土搅拌站';
    li_3.innerHTML = '<img src="' + project_img + '">' + '施工单位项目部';
    li_4.innerHTML = '<img src="' + factory_img + '">' + '混凝土构件预制工厂';
    ul.style.listStyle = 'none';
    ul.style.backgroundColor = '#fff';
    ul.style.marginTop = '8px';
    ul.style.borderRadius = '2px';
    ul.style.boxShadow = '0 0 10px 0 rgba(53,129,251,0.10)';
    ul.style.verticalAlign = 'top';
    // 设置样式  
    div.style.cursor = "pointer";
    div.style.fontSize = '14px';
    button.onclick = function () {
      let name = input.value;
      searchLocal(name);
    }
    map.getContainer().appendChild(div);
    let li_arr = document.getElementById('click').getElementsByTagName('li');
    for(let i = 0; i < li_arr.length; i ++) {
        li_arr[i].style.height = '36px';
    }

    let click = document.getElementById('click');
    click.onclick = function(e) {
        let name = e.target.innerText;
        searchLocal(name);
    }

    let img_arr = document.getElementById('click').getElementsByTagName('img');
    for(let i = 0; i < img_arr.length; i ++) {
        img_arr[i].style.width = '24px';
        img_arr[i].style.paddingTop = '6px';
        img_arr[i].style.marginRight = '8px';
        img_arr[i].style.verticalAlign = 'bottom';
        img_arr[i].style.marginLeft = '16px';
    }
    // 将DOM元素返回  
    return div;
  }
  let myZoomCtrl = new ZoomControl();
  // 添加到地图当中  
  map.addControl(myZoomCtrl);
}
